<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { MdiEdit } from '@vben/icons';

import { Button, message, Select } from 'ant-design-vue';

import { addConfig, getConfigDetail, updateConfig } from '#/api';

const isEdit = ref(false); // 是否为编辑状态

// 表单数据
const month = ref<number | string>();
const type = ref('add'); // 编辑类型

const timeList = Array.from({ length: 12 }, (_, i) => {
  return {
    value: i + 1,
  };
});

// 保存按钮loading
const loading = ref(false);

// 获取配置
const getConfig = async () => {
  try {
    const { data } = await getConfigDetail();
    // 判断是新增配置还是编辑配置类型，如果新增了都是有值的
    type.value = data ? 'update' : 'add';
    month.value = data || 12; // 如果酒店未配置月份则默认编辑时显示12个月
  } catch (error) {
    console.error('获取配置信息失败：', error);
  }
};
// 新增配置
const add = async () => {
  try {
    await addConfig({ timeRang: month.value });
    message.success('保存成功');
    loading.value = false;
  } catch (error) {
    loading.value = false;
    console.error('获取配置信息失败：', error);
  }
};
// 新增配置
const update = async () => {
  try {
    await updateConfig({ timeRang: month.value });
    message.success('保存成功');
    loading.value = false;
  } catch (error) {
    loading.value = false;
    console.error('获取配置信息失败：', error);
  }
};

const submit = async () => {
  try {
    loading.value = true;
    await (type.value === 'add' ? add() : update());
    await getConfig();
    isEdit.value = false;
  } catch (error) {
    loading.value = false;
    console.error('获取配置信息失败：', error);
  }
};

onMounted(() => {
  getConfig();
});
</script>

<template>
  <div class="card-box mb-3 w-full rounded-md">
    <div v-if="!isEdit" class="px-4 pb-6">
      <div class="flex items-center justify-between py-1">
        <div class="text-xl font-bold">日期配置</div>
        <div>
          <Button
            class="flex h-auto items-center px-0 py-3"
            type="link"
            @click="isEdit = true"
          >
            <template #icon>
              <MdiEdit class="icon mr-1" />
            </template>
            编辑
          </Button>
        </div>
      </div>
      <div>
        可预定日期范围：{{
          type === 'add' ? '未设置(小程序默认12个月内)' : month
        }}<span v-if="type !== 'add'">个月内</span>
      </div>
    </div>
    <div v-else class="px-4 pb-6">
      <div
        class="card-box sticky top-[-21px] z-[10] flex items-center justify-between rounded-none border-none py-4"
      >
        <div class="text-xl font-bold">日期配置</div>
        <div class="flex items-center">
          <Button
            class="flex h-auto items-center px-5 py-2"
            @click="isEdit = false"
          >
            取消
          </Button>
          <Button
            :disabled="!month"
            :loading="loading"
            class="ml-2 flex h-auto items-center px-5 py-2"
            type="primary"
            @click="submit"
          >
            保存
          </Button>
        </div>
      </div>
      <div>
        <div class="text-lg">
          可预定日期范围<span class="ml-1 text-red-500">*</span>
        </div>
        <div class="flex items-center pt-2">
          <Select
            v-model:value="month"
            :options="timeList"
            size="large"
            style="width: 180px"
          />
          <span class="pl-2">个月之内</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.icon {
  color: hsl(var(--primary));
}

.light {
  color: hsl(var(--card-foreground));
}
</style>
